<template>
    <div style="background-color: white; padding: 10px 20px">
      <div style="margin-bottom: 10px;overflow: hidden">
        <el-button size="small" @click="addMessage" style="float: left;margin-top: 5px" type="primary" plain>新建消息</el-button>
        <div style="float: right; margin: 5px 0">

          <el-input v-model="keyWord" placeholder="标题或内容" size="small" style="width: 263px"  class="search" @keyup.native.enter="search">
            <i class="el-icon-search" slot="append" style="cursor: pointer;" @click="search"></i>
          </el-input>
        </div>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="title"
          label="标题">
          <template slot-scope="scope">
            <span class="feedbakc_title">{{scope.row.title}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="内容">
          <template slot-scope="scope">
            <div v-html="scope.row.text"></div>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间">
        </el-table-column>
        <el-table-column
          prop="sendTime"
          label="推送时间"
          width="180">
        </el-table-column>
        <el-table-column
          label="推送状态"
        width="100px">
          <template slot-scope="scope">
            <span v-if="scope.row.publishStatus == 0" style="color: #2A97F9">未推送</span>
            <span v-else>已推送</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
        width="100px">
          <template slot-scope="scope">
            <i class="icon-unie123" v-if="scope.row.publishStatus == 0" @click="push(scope.row.id)" style="cursor: pointer"></i>
            <i class="icon-delete_icon" v-else @click="beforDelete(scope.row.id)" style="cursor: pointer"></i>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        style="font-size: 13px"
        center>
        <span slot="title" class="dialog-title">删除消息提醒</span>
        <p style="text-align: center">您确定要删除这个消息吗？</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="small">取 消</el-button>
          <el-button type="primary" @click="deleteMessage" size="small">确 定</el-button>
        </span>
      </el-dialog>


      <el-pagination
        style="margin-top: 10px"
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageNo"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="prev, pager, next, sizes"
        :total="total">
      </el-pagination>

    </div>
</template>

<script>
  import {centerPlatList,send, deleteMsg} from '@/api/message'
    export default {
        name: "list",
        data() {
            return {
                tableData: [],
                pageNo: 1,
                pageSize:10,
                keyWord: '',
                total:0,
                dialogVisible: false,
                deleteId: ''
            }
        },
        created() {
          this.init()
        },
        methods: {
            init() {
                centerPlatList(this.pageNo, this.pageSize, this.keyWord).then(res => {
                    if(res.data.success) {
                        this.tableData = res.data.data.records
                        this.tableData.forEach(value => {
                           value.text = value.content.replace(/<[^>]+>/g, "");
                        })
                        this.total = res.data.total
                    }
                })
            },
            handleSizeChange(size) {
                this.pageSize = size
                this.init()
            },
            handleCurrentChange(page) {
                this.pageNo = page
                this.init()
            },
            search() {
              this.init()
            },
            addMessage() {
                this.$router.push('/setUp/message/add')
            },
            push(id) {
              send(id).then(res => {
                  if(res.data.success) {
                      this.$message({
                          type:'success',
                          message:res.data.msg
                      })
                      this.init()
                  }
              })
            },
            beforDelete(id) {
              this.deleteId = id
              this.dialogVisible = true
            },
            deleteMessage(){ // 删除消息
                deleteMsg(this.deleteId).then(res => {
                    if(res.data.success) {
                      this.$message({
                          type:'success',
                          message: res.data.msg
                      })
                        this.dialogVisible = false
                        this.init()
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
  .feedbakc_title{
    color: #2A97F9;
    cursor: pointer;
  }
</style>
